<template>
    <div style="display: flex;justify-content: space-between">
        <div class="permissBody">
            <el-collapse accordion @change="handleChange" v-model="activeCode" style="text-align: center">
                <el-collapse-item :name="item.id" v-for="(item,index) in roles" :key="index">
                    <template slot="title">
                        <i class="header-icon el-icon-info" style="margin-left: 10px;margin-right: 10px"></i>{{item.namezh}}
                    </template>
                    <el-card>
                        <div slot="header">
                            <span>可访问的资源</span>
                        </div>
                        <div>
                            <el-tree :data="allmenus" :props="defaultProps"
                                     show-checkbox
                                     ref="tree"
                                     :default-checked-keys="selectedMenus"
                                     node-key="id"></el-tree>
                            <div style="margin-top: 10px">
                                <el-button round size="small" @click="Nocollapse">取消修改</el-button>
                                <el-button round size="small" type="primary" @click="doUpdate(item.id,index)">确认修改
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    import todoList from '@/components/sys/TodoList/index.vue'
    export default {
        name: "DepMana",
        components:{
          todoList
        },
        data() {
            return {
                activeCode:-1,
                allmenus: [],
                roles: [],
                role: {
                    name: '',
                    nameZh: ''
                },
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                selectedMenus: []
            }
        },
        mounted() {
            this.initRoles();
        },
        methods: {
            Nocollapse(){
                this.activeCode=-1;
            },
            doUpdate(rid, index) {
                let tree = this.$refs.tree[index];
                let selectEdKey = tree.getCheckedKeys(true);
                let url = '/system/permiss/?rid=' + rid;
                let mids = '&';
                selectEdKey.forEach(mid=>{
                    mids+='mids='+mid+'&';
                });
                this.putRequest(url+mids).then(resp=>{
                    if(resp){
                        this.handleChange(rid);
                    }
                })
            },
            handleChange(rid) {
                if (rid) {
                    this.initSelectedMenus(rid);
                    this.initAllMenus();
                }
            },
            initSelectedMenus(rid) {
                this.getRequest('/system/permiss/' + rid).then(resp => {
                    if (resp) {
                        //console.log(resp)
                        this.selectedMenus = resp;
                    }
                })
            },
            initAllMenus() {
                this.getRequest('/system/permiss/').then(resp => {
                    if (resp) {
                        //console.log(resp)
                        this.allmenus = resp;
                    }
                })
            },
            initRoles() {
                this.getRequest('/system/roles/').then(resp => {
                    this.roles = resp;
                })
            }
        }
    }
</script>

<style>
    .permissBody {
        margin-top: 10px;
        width: 700px;
    }

    .permissHeader .el-input {
        width: 300px;
        margin-right: 6px;
    }


</style>